<template>
	<view class="content">
		<view class="topBox">
			<view class="setBox">
				<view class="left">
					<uni-icons class="icon" type="calendar-filled" size="30" color="#fff" ></uni-icons>
					
					<view class="txt">
						签到
					</view>
				</view>
				<view class="right">
					<uni-icons type="gear" size="30" color="#fff" ></uni-icons>
					<uni-icons type="chat" size="30" color="#fff" ></uni-icons>
				</view>
			</view>
			<view class="users" @click="setFun">
				<view class="u-top">
					<template v-if="!uesrInfo.nickName">
						<image src="/static/tt.jpg" mode="aspectFill"></image>
					<view class="tit">
						注册/登录
					</view>
					</template>
					<template v-else>
						<image :src="uesrInfo.avatarUrl" mode="aspectFill"></image>
					<view class="tie">
						{{uesrInfo.nickName}}
					</view>
					</template>
				</view>
				<view class="u-bottom">
					<view class="u-item">
						<view class="num">
							12
						</view>
						<view class="u-title">
							点赞
						</view>
					</view>
					<view class="u-item">
						<view class="num">
							12
						</view>
						<view class="u-title">
							浏览
						</view>
					</view>
					<view class="u-item">
						<view class="num">
							12
						</view>
						<view class="u-title">
							喜欢
						</view>
					</view>
					<view class="u-item">
						<view class="num">
							12
						</view>
						<view class="u-title">
							收藏
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="list">
					<uni-list>
						<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow title="个人信息" clickable></uni-list-item>
						<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow title="我的购物车" clickable></uni-list-item>
						<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow title="用户反馈" clickable></uni-list-item>
						<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" showArrow title="我的邮件" clickable></uni-list-item>
						<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow title="分享有礼" clickable></uni-list-item>
					</uni-list>
			</view>
		</view>
		<up-popup closeable :show="show" @close="close"  round="20">
			<view class="popup">
				<view class="title">
					获取您的昵称头像
				</view>
				<view class="flex">
					<view class="label">
						获取用户头像:
					</view>
					<button class="avatar-warpper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="uesrInfo.avatarUrl" class="avatar"></image>			
					</button>
				</view>
				<view class="flex">
					<view class="label">
						获取用户昵称:
					</view>
					<input @input="changeName" type="nickname" />
				</view>
				<button size="default" type="primary" @click="userSub">确定</button>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {login,getUserInfo} from '../../api/api.js'
	const extraIcon1 = reactive({
		color: '#666666',
		size: '22',
		type: 'auth'
	})
	const extraIcon2 = reactive({
		color: '#666666',
		size: '22',
		type: 'cart'
	})
	const extraIcon3 = reactive({
		color: '#666666',
		size: '22',
		type: 'chatboxes'
	})
	const extraIcon4 = reactive({
		color: '#666666',
		size: '22',
		type: 'email'
	})
	
	const extraIcon5 = reactive({
		color: '#666666',
		size: '22',
		type: 'gift'
	})
	
	const userInfo = reactive({
		nickName: '',
		avatarUrl: ''
	})
	onLoad(
	//免登逻辑
	async()=>{
		if(uni.getStorageSync('token')&&!uni.getStorageSync('uesrInfo')){
			const {avatarUrl,nickName}=await getUserInfo()
			uesrInfo.avatarUrl=avatarUrl
			uesrInfo.nickName=nickName 
		}else if(uni.getStorageSync('token')&&uni.getStorageSync('uesrInfo')){
			const {avatarUrl,nickName}=JSON.parse(uni.getStorageSync('uesrInfo'))
		uesrInfo.avatarUrl=avatarUrl
		uesrInfo.nickName=nickName 
		}
	}
	)
	const uesrInfo=reactive({
		nickName:'',
		avatarUrl:''
	})
	//控制弹出层显示
	const show=ref(false)
	const close=()=>{
		
		show.value=false
		
	}
	const onChooseAvatar=(e)=>{
		uesrInfo.avatarUrl=e.detail.avatarUrl
	}
	const changeName=(e)=>{
		uesrInfo.nickName=e.detail.value
	}
	const userSub=()=>{
		uni.setStorageSync('uesrInfo',JSON.stringify(uesrInfo))
		show.value=false
	}
	const setFun=()=>{
		uni.showModal({
			title:'温馨提示',
			content:'授权后才能正常使用小程序',
			success(res) {
				if(res.confirm){
					
					uni.login({
					success: async (res)=>{
						// 获取token
						const {token}=await login(res.code)
						uni.setStorageSync('token',token)
						// 获取用户信息
						const {avatarUrl,nickName}=await getUserInfo()
						uesrInfo.avatarUrl=avatarUrl
						uesrInfo.nickName=nickName
						show.value=true
					}
					})
				}
			}
		})
	}
	
</script>

<style lang="scss" scoped>
.icon{
	font-size: 30rpx;
	color: #333;
}
.content{
	height: 100vh;
	background-color: #f5f5f5;
	.topBox{
	
	}
	
	.setBox{
		position: relative;
		width: 100%;
		height: 450rpx;
		background-color: #00aaff;
		display: flex;
		// justify-content: space-between;
		// align-items: center;
		border-radius: 0 0 30% 30%; 
		.left{
		padding: 30rpx 0 0 30rpx;
			display: flex;
			
			
		}
		.right{
			width: 18%;
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0 0 420rpx;
			
		}
		.txt{
			color: #fff;
			font-size: 35rpx;
			padding-top: 6rpx;
			padding-left:20rpx ;
			
		}
	}
}
.users{
	top: 80rpx;
	left: 14rpx;
	position: absolute;
	margin-top: 35rpx;
	padding: 30rpx;
	background-color: #fff;
	height: 280rpx;
	width: 88%;
	box-shadow: 1px 10rpx 20rpx #ececec;
	border-radius: 16rpx;
	.u-top{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 30rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
		.tit{
			font-size: 30rpx;
			font-weight: 700;
			color: #000;
		}
	}
	.u-bottom{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 30rpx;
		.u-item{
			text-align: center;
			.u-title{
				color: #757575;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
			.num{
				color: #000;
				font-size: 33rpx;
				font-weight: bold;
			}
		}
		
	}
}
.popup{
	padding: 20rpx;
	border-radius: 20rpx 20rpx 0 0;
		.title{
			margin-bottom: 20rpx;
			font-size: 40rpx;
			text-align: center;
		}
		.flex{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px solid #f5f5f5;
			padding: 24rpx 0;
		}
		image{
			width: 70rpx;
			height: 70rpx;
		}
		.avatar-warpper{
			border: none;
			border-radius: 10rpx;
			width: 70rpx;
			height: 70rpx;
			margin-left: 20rpx;
			padding: 0;
		}
		
	
}
.listBox{
	height: 200rpx;
	margin: 10rpx auto 0;
	padding: 20rpx;
	border-radius: 12rpx;
}
</style>
